<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" th:href="@{/center/lib/layui-v2.5.5/css/layui.css}" media="all">
		<link rel="stylesheet" th:href="@{/center/css/public.css}" media="all">
		<!-- ztree静态资源 -->
		<link rel="stylesheet" th:href="@{/center/css/zTreeStyle/zTreeStyle.css}" type="text/css">
		<script type="text/javascript" th:src="@{/center/js/jquery-1.9.1.min.js}"></script>
		<script type="text/javascript" th:src="@{/center/js/jquery.ztree.all.js}"></script>
		<script th:src="@{/center/lib/layui-v2.5.5/layui.js}" charset="utf-8"></script>
		<script>
			layui.use(['form'], function() {
				var form = layui.form,
					layer = layui.layer,
					$ = layui.jquery;
		
		
				//监听提交
				form.on('submit(saveBtn)', function(data) {
					var treeObj = $.fn.zTree.getZTreeObj("tree");
					var nodes = treeObj.getCheckedNodes(true);
					var keys = "";
					$.each(nodes, function(index, obj) {
						keys += obj.menuId + ",";
					})
					keys = keys.substring(0, keys.length - 1);
					$("#menuId").val(keys);
					console.log($("#menuId").val());
					$.ajax({
						url: '/center/addRole',
						method: 'POST',
						contentType: 'application/json;charset=utf-8',
						data: data.field.centerRoleName,
						success: function(res) {
							if (res.msg === "成功添加角色:") {
								layer.msg(res.msg + res.count + '个', {
									icon: 1,
									time: 1000 //1秒关闭（如果不配置，默认是3秒）
								}, function() {
		
									parent.document.location.reload();
								});
		
							} else {
								layer.alert(res.msg);
							}
		
						}
					});
		
					return false;
				});
		
		
			});
		
		
		
			$(function() {
				setting = {
					data: {
						simpleData: {
							enable: true,
							idKey: 'menuId', //节点自身的id
							pIdKey: 'parentId' //节点的父Id
						},
						key: {
							name: 'title',
							title: 'title'
						}
					},
					check: {
						enable: true
					},
					view: {
						showIcon: false
					}
		
				};
		
				$.ajax({
					url: '/center/loadTree',
					dataType: 'json',
					success: function(res) {
						var parse = JSON.parse(res.data[0]);
						$.fn.zTree.init($("#tree"), setting, parse);
					}
				});
			});
		</script>
		<style>
			body {
            background-color: #ffffff;
        }
    </style>

	</head>
	<body>
		<form class="layui-form layuimini-form">
			<div class="layui-form-item">
				<label class="layui-form-label required">角色名</label>
				<div class="layui-input-block">
					<input type="text" name="centerRoleName" id="centerRoleName" lay-verify="required" lay-reqtext="角色名不能为空"
					 placeholder="请输入角色名" value="" class="layui-input">

				</div>
			</div>

			<!--权限树xtree  -->
			<div class="layui-form-item">
				<label class="layui-form-label">分配权限：</label>
				<hr class="layui-bg-gray">
				<ul id="tree" class="ztree" style="width:200px;margin-left: 105px"></ul>

			</div>
			<!-- 权限提交隐藏域 -->
			<input type="hidden" id="menuId" name="menuId" />
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
				</div>
			</div>
		</form>
		
	</body>
</html>
